<template>
	<view class="home-box">
		<topnavi @sendLanguage="getLanguage"></topnavi>
		<view class="home-frist-box">
			<image src="@/static/hjpImg/headTu.png"></image>
		</view>
		<view :class="['home-second-box', {'home-second-en': currentLan==='en'}]"><text
				style="color: #8F56EC;">{{$t('home.H81')}}</text> {{$t('home.H9')}}</view>
		<view :class="['text1', {'buy-one-en': currentLan==='en'}]">

			{{$t('home.H82')}}
		</view>
		<view :class="['buy-one', {'buy-one-en': currentLan==='en'}]">{{$t('home.H10')}} </view>
		<view class="ren-button" @click="openBuyPop=true">Mint</view>
		<!-- <view class="ren-rules">
			<view class="tip-icon">
				<u-image  src="@/static/hjpImg/tipIcon.png" width="16px" height="16px"></u-image>
			</view>
			<view>{{$t('home.H4')}}</view>
			<view class="right-arrow" @click="openRuleModal=false">
				<u-image  src="@/static/hjpImg/rightA.png" width="16px" height="8px"></u-image>
			</view>
		</view> -->
		<view class="home-data-show">
			<!-- <view class="data-show-one">{{$t('home.H11')}}</view> -->
			<view v-for="(items, index) in dataShowList" :key="index" class="data-show-two">
				<view class="img-style">
					<u-image :src="items.img" width="42px" height="42px"></u-image>
				</view>
				<view class="name-style">{{items.title}}</view>
				<view class="count-style" style="color: #8344E8;">{{items.count}}<text v-if="index===1">U</text></view>
			</view>

			<view class="data-show-twos">
				<view class="itemtwo">
					<view class="">
						<view class="">
							1%
						</view>
						<view class="">

							{{$t('home.H83')}}
						</view>
					</view>
					<view class="">
						<view class="">
							45%
						</view>
						<view class="">

							{{$t('home.H84')}}
						</view>
					</view>
					<view class="">
						<view class="">
							55%
						</view>
						<view class="">

							{{$t('home.H85')}}
						</view>
					</view>
				</view>

			</view>
			<view class="data-show-twos">
				<view class="itemtwo">
					<view class="">
						<view class="">
							1%
						</view>
						<view class="">

							{{$t('home.H86')}}
						</view>
					</view>
					<view class="">
						<view class="">
							45%
						</view>
						<view class="">

							{{$t('home.H87')}}
						</view>
					</view>
					<view class="">
						<view class="">
							55%
						</view>
						<view class="">

							{{$t('home.H88')}}
						</view>
					</view>
				</view>

			</view>
			<view class="foottext">

				{{$t('home.H89')}}
			</view>
			<!-- <view class="token-style">{{$t('home.H15')}}</view>
			<view class="date-box">
				<u-line-progress
					activeColor="#613AF1" 
					:percentage="percentageValue" 
					height="12"
				></u-line-progress>
			</view>
			<view class="home-plege-btn">
				<view>{{$t('home.H16')}}{{Subscribed}}U</view>
				<view>{{$t('home.H17')}}</view>
			</view> -->
		</view>
		<view class="home-four-title">{{$t('home.H90')}}</view>
		<view class="home-five-box">
			<view class="itembox">
				<view class="">
					<view class="">

					</view>
					<view class="">
						Mint
					</view>
				</view>
				<view class="">
					{{$t('home.H91')}}
					{{$t('home.H92')}}

				</view>
			</view>
			<view class="itembox">
				<view class="">
					<view class="">

					</view>
					<view class="">

						{{$t('home.H93')}}
					</view>
				</view>
				<view class="">


					{{$t('home.H94')}}


				</view>
			</view>
			<view class="itembox">
				<view class="">
					<view class="">

					</view>
					<view class="">

						{{$t('home.H95')}}
					</view>
				</view>
				<view class="">
					{{$t('home.H96')}} <br>
					{{$t('home.H97')}}<br>
					{{$t('home.H98')}}<br>
				</view>
			</view>

			<!-- <view class="home-five-vedio">
				<view class="five-icon">
					<u-image src="@/static/hjpImg/teamLogo.png" width="64px" height="64px"></u-image>
				</view>
				<view class="five-user">{{getCaption(usreaddress)}} {{$t('home.H19')}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H30')}}</view>
				<view class="five-rate">10%</view>
			</view>
			<view class="home-five-show">

				<view class="five-text">{{$t('home.H79')}}100U {{$t('home.H80')}}</view>
				<view class="five-rate">{{selectUse[6]}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H79')}}300U {{$t('home.H80')}}</view>
				<view class="five-rate">{{selectUse[7]}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H79')}}500U {{$t('home.H80')}}</view>
				<view class="five-rate">{{selectUse[8]}}</view>
			</view> -->
		</view>
		<!-- <view class="home-six-box">
			<view v-for="(listItem, indexItem) in listArr" :key="indexItem" class="home-six-list">
				<view class="item-six-list">
					<view class="six-list-line"></view>
					<view class="six-list-count">{{listItem.count}}</view>
					<view :class="['six-list-name', {'six-list-en': currentLan==='en'}]">{{listItem.name}}</view>
				</view>
			</view>
		</view> -->

		<!-- <view class="six-list-btn" @click="openSharePop=true">{{$t('home.H37')}}</view> -->
		<view class="six-list-text">{{$t('home.H99')}}</view>
		<view class="home-nine-box">
			<image src="@/static/hjpImg/parentsT.png" width="554rpx" height="432rpx"></image>
		</view>
		<view class="home-footer">
			<view class="item-footer">
				<view class="footer-tbox">

					<image src="@/static/hjpImg/lianxi.jpg"></image>
					<view class="">

						{{$t('home.H100')}}
					</view>
				</view>
				<view class="menu-list">
					<view v-for="(itemImg, indexImg) in footerIcon" :key="indexImg" class="menu-list-item">
						<a :href="itemImg.limke">
							<u-image :src="itemImg.img" width="42px" height="42px"></u-image>
						</a>
					</view>
				</view>
				<view class="footer-icon-box">
					© 2024 XSJ Systems. All rights reserved.
				</view>
			</view>
		</view>
		<!-- 邀请弹窗 -->
		<u-overlay :show="showoverl">
			<view class="ceotent">
				<view class="ceotbox">
					<u-icon name="close" color="#FFF" size="20" @click="showoverl=false"></u-icon>
				</view>
				<view class="overlaytitle">{{$t('home.H46')}}</view>
				<view class="codeinput">
					<u--input  :placeholder="$t('home.H47')" border="none" inputAlign='center'
						fontSize='14px' color='#fff' v-model="valueCode"></u--input>
				</view>
				<!-- <view class="buy-number">
					需支付<view class="buy-bi" style="color: #8344E8;letter-spacing: 2rpx;">100USDT</view>
				</view> -->
				<view class="qeuding" @click="binCilck">{{$t('home.H48')}}</view>
			</view>
		</u-overlay>


		<u-overlay :show="openBuyPop">
			<view class="overlay-buy">
				<u-icon name="close-circle" color="#B9C1D9" size="25" class="close-buy" @click="buyPopFun"></u-icon>
				<view class="buy-title">Mint</view>
				<!-- <view class="buy-content">
					<view v-for="(itemB, indexBuy) in buyList" :key="indexBuy" 
					:class="['but-con-item', {'but-active-item': activeCheck===indexBuy}]" @click="changeFun(indexBuy, itemB)">
						{{itemB}}U
					</view>
				</view> -->
				<u--input maxlength='2' :placeholder="$t('home.H118')" v-model="numvalue"  @input="handleInput"  border="surround" class="input" type="number"
					clearable></u--input>
				<view class="buy-number">
					{{$t('home.H101')}}
					<view class="buy-bi" style="color: #8344E8;letter-spacing: 2rpx;">{{buyusdt * numvalue}}USDT</view>
				</view>
				<!-- <view class="buy-number buy-margin">
					{{$t('home.H43')}}<view class="buy-bi"><text class="buy-count">{{resultValue/dataShowList[1].count}}</text>{{$t('home.H44')}}</view>
				</view> -->
				<view class="buy-button" @click="BUYClick">Mint</view>

				<view><text>{{$t('home.H102')}}：</text>{{maxvalue - Number(userinfo[0])}}{{$t('home.H103')}}</view>

			</view>
		</u-overlay>
		<u-overlay :show="openSharePop">
			<view class="overlay-share">

				<u-icon name="close-circle" @click='openSharePop=false' color="#B9C1D9" size="16"
					class="close-style"></u-icon>
				<view class="share-text">
					https://peaceplan.world//?code={{usreaddress}}
				</view>
				<view class="share-button" @click="copy(`https://peaceplan.world/?code=${usreaddress}`)">
					{{$t('home.H45')}}
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="openRuleModal">
			<view class="overlay-rules">
				<view class="overlay-text">
					<view class="overtitle">Purchase Guide</view>
					<view class="overtext">
					</view>
					<view class="overmutils">
						Example:
						If 10 USDT is withdrawn and a handling fee of 0.5 USDT is charged, the actual amount received is
						9.5 USDT
						If withdrawing NPC, a handling fee equivalent to 5% of the withdrawal amount at the real-time
						exchange rate will be charged for NPC withdrawal
					</view>
				</view>
				<view class="close-btn">
					<u-icon name="close-circle" color="#fff" size="24" @click="openRuleModal=false"></u-icon>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="showpledge">
			<view class="overlayoadingicon">
				<u-loading-icon :text="$t('home.H49')" textColor="blue" textSize="14" color="blue"></u-loading-icon>
			</view>
		</u-overlay>
	</view>
</template>
<script>
	import {
		USDTController,
		USDT_contracts,
		contractsOBJ,
		controAdress
	} from '@/api/web3.js'
	import {
		number2string
	} from '@/api/help.js'
	import {
		gethomeindex
	} from "@/api/home.js"
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				buyusdt:100,
				numvalue:1,
				maxvalue:20,
				userinfo: {},
				resultValue: 100,
				activeCheck: 0,
				openBuyPop: false,
				openSharePop: false,
				openRuleModal: false,
				showpledge: false,
				showoverl: false,
				invite_code: "",
				valueCode: "",
				Subscribed: "",
				totalCount: '',
				usreaddress: "",
				currentLan: localStorage.getItem('locale'),
				dataShowList: [{
						img: require('@/static/hjpImg/tuBi.png'),
						title: this.$t('home.H12'),
						count: '1.000.000.000.0000'
					},
					// {img:require('@/static/hjpImg/tuQian.png'), title: this.$t('home.H13'), count: '0'},
					// {img:require('@/static/hjpImg/tuXiao.png'), title: this.$t('home.H14'), count: '324245'},
				],
				footerIcon: [{
						img: require('@/static/hjpImg/lianOne.png'),
						limke: ''
					},
					{
						img: require('@/static/hjpImg/lianTwo.png'),
						limke: ''
					},
					{
						img: require('@/static/hjpImg/lianThree.png'),
						limke: ''
					},
					{
						img: require('@/static/hjpImg/lianFour.png'),
						limke: ''
					},
					{
						img: require('@/static/hjpImg/lianFive.png'),
						limke: ''
					},
				],

				listArr: [{
						count: '7895.00',
						name: this.$t('home.H33')
					},
					{
						count: '7895.89',
						name: this.$t('home.H34')
					},
				],
				selectUse: {},
				buyList: ['100', '300', '500', '1000'],
				percentageValue: 30,
			}
		},
		computed: {
			// <!-- Telegram号:+668-0461-1602
			// 推特:@HPJH03
			// Facebook:Plan Peace -->
		},
		watch: {
			'usreaddress': function(a, b) {
				// this.getselectPrice();
				this.userData();
				this.getselectUpline();
			},
			deep: true
		},
		onLoad(parameter) {
			if (parameter.code) {
				uni.setStorageSync('code', parameter.code);
				this.valueCode = parameter.code;
			} else {
				uni.setStorageSync('code', '');
			}

		},
		mounted() {

			this.usreaddress = uni.getStorageSync('account') || '';
			this.valueCode = uni.getStorageSync('code') || '';
			if (this.usreaddress) {
				this.getselectUpline();
				// this.getselectPrice();
				this.userData();
				this.getHomeData()
			}
		},
		onShow() {},
		methods: {

			handleInput(event) {
				console.log(event)
				if (Number(event) > (this.maxvalue - Number(this.userinfo[0]))){
					this.numvalue = this.maxvalue - Number(this.userinfo[0])
				} else if (Number(event) < 0) {
					this.numvalue = 1;
				}
				this.resultValue = this.numvalue * this.buyusdt

			},
			// 获取首页数据
			async getHomeData() {

				const {
					data
				} = await gethomeindex()
				console.log(data,'1212')
				this.homeInfo = data
				
				this.footerIcon[0].limke = this.homeInfo.Discord
				this.footerIcon[4].limke = this.homeInfo.Facebook
				this.footerIcon[3].limke = this.homeInfo.Telegram
			},


			//0.获取当前币价格返回值：当前价格 （实际价格需要 除 1000）
			async getselectPrice() {
				let res = await contractsOBJ.methods.selectPrice().call();
				let res1 = await contractsOBJ.methods.numberOfHolders().call();
				let res2 = await contractsOBJ.methods.selectAmount().call();
				this.Subscribed = (res2 / 1000000000000000000) + 3000000;
				this.percentageValue = (((this.Subscribed / 10000000) * 100).toFixed(2));
				console.log(this.percentageValue, 'this.percentageValue');
				// this.$set(this.dataShowList[1],'count',res/1000);
				// this.$set(this.dataShowList[2],'count',res1);

			},
			//查询否绑定推荐人
			async getselectUpline() {
				//let res = await contractsOBJ.methods.selectUpline('0x5848114d449FF837aDD54971D6da120E73Bfa128').call();
				let res = await contractsOBJ.methods.selectUpline(this.usreaddress).call();
				console.log(res, '返回');
				if (res === "" || res === "0x0000000000000000000000000000000000000000") {
					this.showoverl = true;
				} else {
					this.showoverl = false;
				}

			},
			//绑定推荐人
			async binCilck() {
				if (this.valueCode == '') {
					return uni.showToast({
						title: this.$t('home.H74'),
						icon: "none",
						duration: 3000,
					})
				}

				this.showpledge = true;
				let sendapprove = await contractsOBJ.methods.upline(this.valueCode).send({
					from: this.usreaddress
				});
				if (sendapprove) {
					uni.showToast({
						title: this.$t('home.H75'),
						icon: "success",
						duration: 3000,
					})
					this.showpledge = false;
					this.showoverl = false;
				}



			},
			//8.查询用户信息
			async userData() {
				let res = await contractsOBJ.methods.users(this.usreaddress).call();

				console.log(res, '11111112221')
				this.userinfo = res
				return
				this.$set(this.listArr[0], 'count', res[4]);
				this.$set(this.listArr[1], 'count', res[5] / 1000000000000000000);
				//6：我的100U当前推荐人数
				//7：我的300U当前推荐人数
				//	8：我的500U当前推荐人数
				this.selectUse = res;
				this.$set(this.listArr[2], 'count', res[6]);
				this.$set(this.listArr[3], 'count', res[7] / 1000000000000000000);

			},
			async BUYClick() {
				console.log(this.resultValue, 'resultValue');
				if (this.resultValue == 100 && this.selectUse[10]) {
					return uni.showToast({
						title: this.$t('home.H76'),
						icon: "none",
						duration: 3000,
					})
				}
				if (this.resultValue == 300 && this.selectUse[6] < 5) {
					console.log('zoulezheli');
					return uni.showToast({
						title: this.$t('home.H77'),
						icon: "none",
						duration: 3000,
					})
				}
				if (this.resultValue == 500 && this.selectUse[7] < 3) {
					return uni.showToast({
						title: this.$t('home.H77'),
						icon: "none",
						duration: 3000,
					})
				}
				if (this.resultValue == 1000 && this.selectUse[8] < 2) {
					return uni.showToast({
						title: this.$t('home.H77'),
						icon: "none",
						duration: 3000,
					})
				}
				try {
					//授权
					let resjoinHs
					let value = '1000000000000000000000';
					let result = await USDT_contracts.methods.allowance(this.usreaddress, controAdress).call();
					let sunNBMer = number2string(this.resultValue * 1000000000000000000)
					if (result < sunNBMer) {
						this.showpledge = true;
						let sendapprove = await USDT_contracts.methods.approve(controAdress, sunNBMer).send({
							from: this.usreaddress
						});
						if (sendapprove) {
							resjoinHs = await contractsOBJ.methods.buyGXSJ(sunNBMer).send({
								from: this.usreaddress
							});
							if (resjoinHs) {
								this.showpledge = false;
								uni.showToast({
									title: this.$t('home.H78'),
									icon: "success",
									duration: 3000,
								})
								this.openBuyPop = false;
							}
						}
					} else {
						this.showpledge = true;
						resjoinHs = await contractsOBJ.methods.buyGXSJ(sunNBMer).send({
							from: this.usreaddress
						});
						if (resjoinHs) {
							this.showpledge = false;
							uni.showToast({
								title: this.$t('home.H78'),
								icon: "success",
								duration: 3000,
							})
							this.openBuyPop = false;
						}
					}
				} catch (e) {
					this.showpledge = false;
				}

			},

			// 触发方法
			copy(cont) {
				uniCopy({
					content: cont,
					success: (res) => {
						uni.showToast({
							title: '复制成功！',
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			buyPopFun() {
				this.openBuyPop = false;
			},
			changeFun(index, item) {
				this.activeCheck = index;
				this.resultValue = item;
				//this.dataShowList[1]
				console.log(index);
			},
			getLanguage(value) {
				this.currentLan = value;
				console.log(this.currentLan);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/common.scss';

	.text1 {
		font-family: PangMenZhengDao;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		margin: 30rpx 0 44rpx 0;
	}

	.home-box {
		width: 100%;
		background: url('../../static/hjpImg/pageBg.png');
		background-size: cover;
		height: 100%;

		.home-frist-box {
			width: 750rpx;
			height: 857rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.home-second-box {
			width: 630rpx;
			font-size: 64rpx;
			margin: 0 auto;
			color: #FFFFFF;
			text-align: center;
			margin-bottom: 16px;
			font-weight: bold;
			font-family: PangMenZhengDao;
		}

		.home-second-en {
			@include ellipse();
			font-size: 58rpx;
		}

		.buy-one {
			// @include size(315px, 84px);
			width: 630rpx;
			margin: 0 auto;
			margin-bottom: 30px;
			@include font(13px, 400);
			color: #FFFFFF90;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 3rpx;
		}

		.buy-one-en {
			// @include ellipse();
			font-size: 15px;
		}

		.ren-button {
			@include size(315px, 50px);
			margin: 0 auto;
			margin-bottom: 16px;
			line-height: 50px;
			background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
			border-radius: 8px;
			text-align: center;
			@include font(16px, 600);
			color: #FFFFFF;
			margin-bottom: 80rpx;
		}

		.ren-rules {
			@include flex-space-between(center, center);
			margin: 0 0 50px 0px;
			@include font(16px, 400);
			color: #691EE2;
			height: 22px;

			.tip-icon {
				@include size(16px, 16px);
				margin-right: 7px;
			}

			.right-arrow {
				@include size(14px, 8px);
				margin-left: 7px;
			}
		}

		.home-data-show {
			margin: 0 auto;
			margin-bottom: 50px;
			background: #161A33;
			border-radius: 10px;
			width: 600rpx;
			padding: 40rpx 30rpx;

			.data-show-one {
				padding-top: 40px;
				text-align: center;
				@include size(100%, 39px);
				@include font(32px, 600);
				color: #DDDDDD;
				line-height: 38px;
			}

			.data-show-two {
				background: #1D2139;
				border-radius: 10px;
				margin: 0 auto;
				text-align: center;
				padding: 36rpx 0 14rpx;

				.itemtwo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view {
						width: 33%
					}
				}

				.img-style {
					@include size(42px, 42px);
					margin: 0 auto;
					margin-bottom: 14px;
					padding-top: 10px;
				}

				.name-style {
					margin-bottom: 14px;
					@include size(100%, 19px);
					@include font(14px, 400);
					color: #808080;
					line-height: 19px;
				}

				.count-style {
					@include size(100%, 19px);
					margin-bottom: 30px;
					@include font(24px, 500);
					color: #FFFFFF;
					line-height: 19px;
				}
			}

			.foottext {
				font-family: PingFang-TC, PingFang-TC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF95;
				line-height: 36rpx;
				text-align: center;
				margin-top: 42rpx;
			}

			.data-show-twos {
				padding: 54rpx 8rpx 54rpx;
				background: #1D2139;
				border-radius: 10px;
				margin: 0 auto;
				text-align: center;
				margin-top: 32rpx;

				.itemtwo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view {
						width: 30%;

						>view:nth-child(1) {
							font-family: Montserrat, Montserrat;
							font-weight: 500;
							font-size: 36rpx;
							color: #FFFFFF;
							line-height: 38rpx;
							font-style: normal;
							margin-bottom: 12rpx;
						}

						>view:nth-child(2) {
							font-weight: 400;
							font-size: 24rpx;
							color: #999;

						}
					}

					>view:nth-child(2) {
						border-left: 2rpx solid #97979710;
						border-right: 2rpx solid #97979710;

					}
				}

			}

			.token-style {
				@include size(327px, 19px);
				margin: 14px 0 19px;
				text-align: center;
				@include font(16px, 400);
				color: #FFFFFF;
				line-height: 19px;
			}

			.date-box {
				@include size(295px, 12px);
				margin: 0 auto;
			}

			.home-plege-btn {
				@include size(295px, 19px);
				line-height: 19px;
				margin: 0 auto;
				margin-top: 19px;
				margin-bottom: 30px;
				color: #808390;
				@include flex-space-between(space-between, center);
				@include font(13px, 400);
			}
		}

		.home-four-title {
			text-align: center;
			@include size(100%, 27px);
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 27px;
			margin-bottom: 31px;
			font-weight: bold;
		}

		.home-five-box {
			padding: 40rpx 32rpx;
			width: 600rpx;
			margin: 0 auto;
			background: #161A33;
			border-radius: 10px;

			.itembox {
				margin-bottom: 20rpx;

				>view:nth-child(1) {
					display: flex;
					align-items: center;
					color: #8344E8;
					font-size: 34rpx;
					font-weight: bold;

					view:nth-child(1) {
						width: 10rpx;
						height: 10rpx;
						background: #8344E8;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				>view:nth-child(2) {
					margin-left: 30rpx;
					font-size: 24rpx;
					line-height: 2;
					letter-spacing: 4rpx;
				}

			}

			.home-five-vedio {
				width: 100%;
				height: 80px;
				background: rgba(255, 255, 255, 0.03);
				border-radius: 10px 10px 0px 0px;
				border: 1px solid rgba(151, 151, 151, 0.1);
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				margin-bottom: 28px;

				.five-icon {
					@include size(64px, 64px);
					margin: 0px 11px 0 16px;
					padding-top: 40px;
				}

				.five-user {
					font-size: 16px;
					color: #FFFFFF;
					margin-top: 10px;
				}
			}

			.home-five-show {
				@include flex-space-between(space-between, center);
				height: 20px;
				@include font(14px, 400);
				color: #FFFFFF;
				line-height: 20px;
				margin: 0px 24px 19px 16px;

				.five-text {
					width: 145px;
					@include ellipse(1);
				}

				.five-rate {
					color: #691EE2;
				}
			}
		}

		.home-six-box {
			@include size(327px, 180px);
			margin: 0 auto;
			@include flex-space-between(space-between, center);
			flex-wrap: wrap;
			align-content: center;

			.home-six-list {
				@include size(159px, 100px);
				background: #161A33;
				margin-top: 10px;
				border-radius: 8px;

				.item-six-list {
					width: 143px;
					margin: 18px 0 17px 16px;

					.six-list-line {
						@include size(18px, 2px);
						background: #691EE2;
						margin-bottom: 16px;
					}

					.six-list-count {
						margin-bottom: 7px;
						@include size(100%, 21px);
						@include font(16px, 600);
						color: #FFFFFF;
						line-height: 21px;
					}

					.six-list-name {
						margin-bottom: 17px;
						@include size(100%, 21px);
						@include font(14px, 400);
						color: #808080;
						line-height: 21px;
					}

					.six-list-en {
						font-size: 12px;
						@include ellipse(1);
					}
				}
			}
		}

		.six-list-btn {
			text-align: center;
			@include size(162px, 42px);
			background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
			border-radius: 21px;
			line-height: 42px;
			color: #FFFEFE;
			@include font(16px, 400);
			margin: 0 auto;
			margin-top: 30px;
			margin-bottom: 50px;
		}

		.six-list-text {
			text-align: center;


			font-family: AlibabaPuHuiTiB;
			font-size: 40rpx;
			color: #FFFFFF;
			font-style: normal;
			font-weight: bold;
			margin: 80rpx 0 60rpx 0;
		}

		.home-nine-box {
			width: 554rpx;
			height: 423rpx;
			margin: 0 auto;
			margin-top: 30px;
			margin-bottom: 50px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.home-footer {
			background: #161A33;
			padding: 120rpx 0 120rpx 0;

			.item-footer {
				margin-left: 40px;

				.footer-tbox {

					margin-bottom: 80rpx;
					display: flex;
					align-items: center;
					font-size: 40rpx;
					font-weight: bold;
					letter-spacing: 2rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}
				}

				.menu-list {
					@include size(295px, 42px);
					margin: 0 40px 47px 0;
					@include flex-space-between(space-between, center);

					.menu-list-item {
						@include size(42px, 42px);
					}
				}

				.footer-icon-box {
					width: 100%;
					height: 27px;
					font-size: 14px;
					color: #FFFFFF;
					line-height: 27px;
				}
			}
		}

		.overlay-buy {
			padding: 20rpx 34rpx 60rpx;
			margin: 0 auto;
			margin-top: 189px;
			background: #161A33;
			border-radius: 10px;

			>view:nth-child(6) {
				text-align: center;
				font-size: 28rpx;
				margin-top: 52rpx;

				>text {
					color: #ffffff95;
				}
			}

			.input {
				background: rgba(255, 255, 255, 0.03);
				margin-bottom: 50rpx;
				height: 60rpx;
			}

			::v-deep .uni-input-input {
				background: transparent;
				border-radius: 16rpx;
				color: #fff;
			}

			.close-buy {
				margin: 21px 0 0px 290px;
			}

			.buy-title {
				@include size(100%, 25px);
				margin-bottom: 90rpx;
				text-align: center;
				@include font(18px, 600);
				color: #FFFFFF;
				line-height: 25px;
			}

			.buy-content {
				@include size(295px, 126px);
				margin: 0 auto;
				margin-bottom: 2px;
				@include flex-space-between(space-between, center);
				flex-wrap: wrap;
				align-content: center;

				.but-con-item {
					@include size(141px, 49px);
					background: rgba(255, 255, 255, 0.03);
					border-radius: 8px;
					color: #777988;
					line-height: 49px;
					text-align: center;
					@include font(16px, 500);
					margin-bottom: 14px;
				}

				.but-active-item {
					border: 1px solid #6B21E2;
					color: #FFFFFF;
				}
			}

			.buy-number {
				margin: 0 auto;
				margin-bottom: 14px;
				@include font(13px, 500);
				color: #B9C1D9;
				line-height: 18px;
				@include flex-space-between(space-between, center);

				.buy-bi {
					@include font(14px, 400);
					color: #FFFFFF;
				}

				.buy-count {
					@include font(14px, 400);
					color: #26A17B;
				}
			}

			.buy-margin {
				margin-bottom: 31px;
			}

			.buy-button {
				margin: 0 auto;
				margin-bottom: 16px;
				background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
				border-radius: 8px;
				line-height: 54px;
				@include font(16px, 400);
				color: #fff;
				text-align: center;
			}

			.but-tip {
				@include size(327px, 20px);
				line-height: 20px;
				margin-bottom: 30px;
				text-align: center;
				@include font(14px, 400);
				color: #808080;
				@include flex-space-between(center, center);

				.buy-tip-title {
					color: #FFFFFF;
					margin-left: 6px;
				}
			}
		}

		.overlay-share {
			@include size(327px, 286px);
			margin: 0 auto;
			margin-top: 263px;
			background: #161A33;
			border-radius: 10px;

			.close-style {
				margin: 21px 0 44px 290px;
			}

			.share-text {
				@include size(273px, 66px);
				margin: 0 auto;
				@include font(16px, 400);
				color: #FFFFFF;
				line-height: 22px;
				margin-bottom: 55px;
				text-align: center;
				word-wrap: break-word;
			}

			.share-button {
				@include size(295px, 54px);
				margin: 0 auto;
				margin-bottom: 30px;
				background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
				border-radius: 8px;
				@include font(16px, 400);
				color: #0C0C0C;
				text-align: center;
				line-height: 54px;
			}
		}

		.overlay-rules {
			margin: 160px 20px 0;
			border: 1px soild red;
			height: 400px;

			.overlay-text {
				background: #FFFFFF;
				border-radius: 15px;
				padding: 30px 0;

				.overtitle {
					margin: 0px 20px 18px;
					height: 31px;
					@include font(22px, bold);
					color: #073B4C;
					line-height: 33px;
				}

				.overtext {
					margin: 0px 17px 10px 18px;
					height: 63px;
					@include font(14px, 400);
					color: #073B4C;
					line-height: 21px;
				}

				.overmutils {
					margin: 0 17px 0 18px;
					height: 168px;
					@include font(14px, 400);
					color: #073B4C;
					line-height: 21px;
				}
			}

			.close-btn {
				margin: 30px 155px 0;
			}

		}
	}

	.overlayoadingicon {
		position: absolute;
		top: 50%;
		left: 50%;
		color: blue;
		transform: translate(-50%, -50%);
	}

	.ceotent {
		width: 620rpx;
		height: 250px;
		border-radius: 5%;
		background-color: #161A33;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 20rpx;

		.ceotbox {
			padding-top: 10px;
			display: flex;
			justify-content: right;
			margin-right: 10px;
		}

		.overlaytitle {
			text-align: center;
			color: #fff;
			font-size: 16px;
			font-weight: bold;

		}

		.codeinput {
			width: 540rpx;
			margin: 0 auto;
			margin-top: 30px;
			border-radius: 15px;
			border: 1px solid #727376;

			/deep/.u-input__content__field-wrapper__field {
				height: 60px;
			}
		}

		.qeuding {
			width: 540rpx;
			margin: 0 auto;
			margin-top: 50px;
			font-size: 16px;
			font-weight: bold;
			color: #FFF;
			text-align: center;
			border-radius: 15px;
			line-height: 40px;
			border: 1px solid #555;
			background-size: cover;
		}
	}
</style>